<script>
import CRUD, { presenter, header, form, crud } from '@/components/Crud/customCrud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/PaginationCustom.vue'
import { requestGet } from '@/api/system/common'
import SettingDialog from '@/views/portal4.0/livebos/component/setting.vue'
const defaultForm = {
  id: null,
  name: null,
  host: null,
  ssxt: null,
  yhsf: null,
  isDefault: true,
  isEnabled: true
}
export default {
  name: 'PortalNewLiveBosIndex',
  dicts: ['service_dx'],
  components: { rrOperation, pagination, SettingDialog },
  cruds() {
    return CRUD({
      title: 'LiveBos工作台',
      url: '/rest/api/sys/livebos/v1/layout',
      props: {
        searchToggle: true
      }
    })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      enable: [{
        id: 'k-1',
        label: '启用',
        value: true
      }, {
        id: 'k-2',
        label: '禁用',
        value: false
      }],
      systems: []
    }
  },
  mounted() {
    this.initSystem()
  },
  methods: {
    initSystem() {
      requestGet('rest/api/manager/system').then((res) => {
        const { content } = res
        this.systems = content
      }).catch(() => {
        this.systems = []
      })
    },
    changeSystem(data) {
      if (data && this.systems.length > 0) {
        this.systems.forEach(item => {
          if (item.id === data) {
            this.form.host = item.url === '' ? '' : item.url.replace('https://', '').replace('http://', '')
            this.form.name = item.name
          }
        })
      }
    },
    setting(data) {
      this.$refs.setting.openDialog(data)
    }
  }
}
</script>

<template>
  <div class="body-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.blurry"
          clearable
          size="small"
          placeholder="请输入工作台名称名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation />
      </div>
    </div>
    <!--表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="700px"
    >
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        size="small"
        label-width="120px"
      >
        <el-form-item
          :rules="[{ required: true, message: '请选业务系统', trigger: 'blur' }]"
          label="请选择业务系统"
          prop="ssxt"
        >
          <el-select
            v-model="form.ssxt"
            clearable
            placeholder="请选业务系统"
            style="width: 500px;"
            @change="changeSystem"
          >
            <el-option
              v-for="item in systems"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入业务系统名称', trigger: 'blur' }]"
          label="系统名称"
          prop="name"
        >
          <el-input v-model="form.name" placeholder="请输入业务系统名称" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入host地址', trigger: 'blur' }]"
          label="host地址"
          prop="host"
        >
          <el-input v-model="form.host" placeholder="请输入host地址" />
        </el-form-item>
        <el-form-item
          label="开放对象"
          prop="yhsf"
          :rules="[{ required: true, message: '请选择开放对象', trigger: 'change' }]"
        >
          <el-radio-group v-model="form.yhsf">
            <el-radio
              v-for="item in dict.service_dx"
              :key="item.id"
              :label="parseInt(item.value)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否默认">
          <el-radio-group
            v-model="form.isDefault"
          >
            <el-radio
              v-for="item in enable"
              :key="item.id+'-default'"
              :label="item.value"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group
            v-model="form.isEnabled"
          >
            <el-radio
              v-for="item in enable"
              :key="item.id+'-enable'"
              :label="item.value"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="crud.submitCU"
        >确认</el-button>
      </div>
    </el-dialog>
    <!--页面数据-->
    <div class="custom-body">
      <div
        v-for="(item,index) in crud.data"
        :key="'data-'+index"
        class="custom-ul-li"
      >
        <div class="custom-ul-li-body">
          <div class="custom-ul-image">
            <div v-if="item.isEnabled" class="ul-icon success">
              启用
            </div>
            <div v-else class="ul-icon error">
              禁用
            </div>
          </div>
          <div class="custom-ul-right">
            <div class="custom-ul-title title">
              {{ item.name }}
              <span v-for="obj in dict.service_dx" :key="obj.id">
                <span v-if="parseInt(obj.value) === item.yhsf ">{{ '【'+ obj.label+'】' }}</span>
              </span>
            </div>
            <div class="custom-ul-title db">{{ item.host }}</div>
            <div class="custom-ul-button ">
              <el-button type="text" @click="crud.toEdit(item)">编辑</el-button>
              <el-button type="text" @click="setting(item)">设置</el-button>
              <el-button type="text" @click="crud.doDelete(item)">删除</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="custom-ul-li">
        <div class="custom-ul-li-body add" @click="crud.toAdd">
          <div class="custom-ul-icon">
            <div class="custom-ul-icon-icon">
              <i class="el-icon-plus" />
            </div>
            <div class="custom-ul-add">添加</div>
          </div>
        </div>
      </div>
    </div>
    <!--分页组件-->
    <pagination />
    <setting-dialog ref="setting" />
  </div>
</template>
<style lang="scss" scoped>
.body-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.custom-body {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  .custom-ul-li {
    width: 305px;
    height: 130px;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    .custom-ul-li-body {
      cursor: pointer;
      width: 100%;
      height: 100%;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      display: flex;
      flex-flow: row nowrap;
      .custom-ul-icon {
        width: 100%;
        height: 60px;
        margin-top: 16px;
        color: #409eff;
        .custom-ul-icon-icon {
          width: 100%;
          height: 40px;
          text-align: center;
          font-size: 32px;
        }
        .custom-ul-add {
          width: 100%;
          height: 20px;
          text-align: center;
          line-height: 20px;
          font-size: 14px;
        }
      }
      .custom-ul-image {
        width: 80px;
        height: 100%;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
      }
      .custom-ul-right {
        width: 205px;
        height: 100%;
        padding: 5px 0;
        box-sizing: border-box;
        .custom-ul-title {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
        }
        .custom-ul-title.title {
          font-weight: 500;
          margin: 0;
          text-align: left;
        }
        .custom-ul-title.db {
          color: #909399;
        }
        .custom-ul-button {
          width: 100%;
          height: 20px;
          line-height: 35px;
          text-align: right;
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }
    .custom-ul-li-body.add {
      border: 1px dashed #4AB7BD;
    }
  }
}
.ul-icon {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.ul-icon.success {
  background-color: #67C23A;
}
.ul-icon.error {
  background-color: #F56C6C;
}
</style>
